<template>
  <div>
    <Portal to="right-disable"
            :disabled="!queryModelDefaultSetting.showSetting">
      <DashboardInterceptConsumer :gadgetId="id"
                                  shadow="hover"
                                  :style="{height:gadgetHeight+ 'px',backgroundImage:'url('+gadgetSetting.backgroundImg+')'}">
        <el-card v-loading="loading"
                 :style="{height:gadgetHeight+ 'px',backgroundImage:'url('+gadgetSetting.backgroundImg+')'}"
                 shadow="hover"
                 style="background:no-repeat;background-size:cover;background-position: center center;">
          <div class="box">
            <div class="box-text">
              <div :style="{fontSize:gadgetSetting.titleFontSize,color:gadgetSetting.titleFontColor }">
                {{ gadgetSetting.title }}
              </div>
              <div style="margin:5px"></div>
              <div :style="{fontSize:gadgetSetting.valueFontSize,color:gadgetSetting.valueFontColor,'cursor': gadgetSetting.drillThrough&&gadgetSetting.drillThrough.status?'pointer':'' }"
                   @click="findOriginData">{{ datesource[gadgetSetting.valueFieldsName] }}
              </div>
              <div v-if="datesource[gadgetSetting.valueFieldsNameMeasure2]">
                <el-divider></el-divider>
                <div style="display:flex; justify-content: flex-start;align-items: center">
                  <div :style="{fontSize:gadgetSetting.title2FontSize,color:gadgetSetting.title2FontColor }">
                    {{ gadgetSetting.title2 }}
                  </div>
                  <div style="margin:5px;"
                       :style="{fontSize:gadgetSetting.value2FontSize,color:gadgetSetting.value2FontColor }">
                    {{ datesource[gadgetSetting.valueFieldsNameMeasure2] }}
                  </div>
                </div>
              </div>
            </div>
            <div class="box-icon">
              <i style="margin-top:10px"
                 :style="{fontSize:gadgetSetting.iconFontSize,color:gadgetSetting.iconFontColor }"
                 :class="gadgetSetting.icon"></i>
            </div>
          </div>
        </el-card>
      </DashboardInterceptConsumer>

    </Portal>
    <model :showSetting="queryModelDefaultSetting.showSetting"
           @queryModelClosed="queryModelClosed"
           :dataInfo="queryModelDefaultSetting.dataInfo"
           :updateGadget="upgradeGadgetSetting"
           :slicer='slicer' />
  </div>
</template>

<script>
import mixinGadgetViewModule from '@/mixins/gadget-view-module'
// import model from '@/components/gadget/query-model/query-model.vue'
import { defaultGadgetSettingList } from '@/utils/data-json'
export default ({
  mixins: [mixinGadgetViewModule],
  components: { model: () => import('@/components/gadget/query-model/query-model') },
  data: function () {
    return {
      datesource: {
        value: 'NA',
        value2: 'NA'
      },
      gadgetSetting: {},
      loading: false,
      queryModelDefaultSetting: {
        showSetting: false,
        dataInfo: {
          businessId: this.pageId,
          gadgetId: this.id,
          gadgetType: 'cardicon',
          gadgetSetting: this._.find(defaultGadgetSettingList, { gadgetType: 'cardicon' }).gadgetSetting
          // gadgetSetting: {
          //   iconFontSize: '30px',
          //   iconFontColor: '#fb434a',
          //   icon: 'el-icon-chat-dot-square',
          //   titleFontSize: '14px',
          //   titleFontColor: '#74788d',
          //   title: 'revenue',
          //   valueFontSize: '26px',
          //   valueFontColor: '#495057',
          //   value: '$290,000',

          //   title2: 'disbolock',
          //   title2FontSize: '14px',
          //   title2FontColor: '#74788d',
          //   value2FontColor: '#495057',
          //   value2FontSize: '26px',
          //   backgroundImg: 'https://oss.mspbots.ai/app/gadget/card-line-background.png',
          //   IsContrast: false,
          //   calculationSymbol: 1, // 1:sum 2:max 3:min 4:average 5:count
          //   contrastName: '',
          //   valueFieldsName: 'value',
          //   valueFieldsNameMeasure2: 'value2'

          // }
        }
      }
    }
  },
  beforeCreate () {
    // this.$options.components.model = () => import('@/components/gadget/query-model/query-model')
  },
  created () {
    this.gadgetHeight = (this.gadgetInfo.h * 20) + 3
    // this.query()
    this.subscribeMessage('runReport', this.query)
    this.$store.state.isWidget = false
  },
  methods: {
    queryModelClosed () {
      this.queryModelDefaultSetting.showSetting = false
      this.query()
    },
    showQueryModel () {
      this.queryModelDefaultSetting.showSetting = true
    },
    resized (i, newH, newW, newHPx, newWPx) {
      this.gadgetHeight = (newH * 20)  + 3
      this.gadgetWidth = newWPx
    },

    query () {
      this.loading = true
      this._.merge(this.gadgetSetting, this.queryModelDefaultSetting.dataInfo.gadgetSetting)
      var _self = this
      var param = {
        ...this.slicer,
        code: this.code,
        gadgettype: this.wgadgettype,
        widgetName: this.wName,
        pageId: this.pageId,
        gadgetId: this.id,
        filter: this.getFilterStr(),
        type: this.filterType
      }
      this.$interface.reports.getReportDataInfo(param).then(({ data: res }) => {
        if (res.config) {
          _self.gadgetSetting = Object.assign({}, _self._.merge(_self.gadgetSetting, res.config))
        }

        if (res.data && res.data.length > 0) {
          let tempData = res.data
          if (_self.gadgetSetting && _self.gadgetSetting.IsContrast) {
            let stempList = []
            delete _self.datesource[_self.gadgetSetting.valueFieldsNameMeasure2]
            for (var i = tempData.length - 1; i >= 0; i--) {
              stempList.push(tempData[i][_self.gadgetSetting.contrastName] * 1)
            }
            if (_self.gadgetSetting.calculationSymbol === 1) {
              // sum
              let sum = 0
              stempList.map(e => {
                sum += e
              })
              _self.datesource[_self.gadgetSetting.valueFieldsName] = sum
            }
            if (_self.gadgetSetting.calculationSymbol === 2) {
              // max
              _self.datesource[_self.gadgetSetting.valueFieldsName] = stempList.sort()[stempList.length - 1]
            }
            if (_self.gadgetSetting.calculationSymbol === 3) {
              // min
              _self.datesource[_self.gadgetSetting.valueFieldsName] = stempList.sort()[0]
            }
            if (_self.gadgetSetting.calculationSymbol === 4) {
              // average
              let sum = 0
              stempList.map(e => {
                sum += e
              })
              _self.datesource[_self.gadgetSetting.valueFieldsName] = Math.floor(sum / stempList.length)
            }
            if (_self.gadgetSetting.calculationSymbol === 5) {
              // count
              _self.datesource[_self.gadgetSetting.valueFieldsName] = stempList.length
            }
          } else {
            _self.datesource[_self.gadgetSetting.valueFieldsName] = tempData[0][_self.gadgetSetting.valueFieldsName]
            _self.datesource[_self.gadgetSetting.valueFieldsNameMeasure2] = tempData[0][_self.gadgetSetting.valueFieldsNameMeasure2]
          }
        }

        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
  }
})
</script>
<style scoped>
.el-card ::v-deep .el-card__body {
  padding: 5px 5px !important;
}

.el-card ::v-deep .el-divider--horizontal {
  margin: 3px 0 !important;
}

.box {
  display: flex;
  justify-content: space-between;
}

.box-icon {
  align-items: flex-start;
}

.box-text {
  margin: 10px 10px;
}
</style>
